import React, { useEffect, useState } from "react";
import axios from "axios";
import style from "../css/PetList.css";
import { useNavigate } from "react-router-dom";
import {
  balanceOf,
  getMetadata,
  tokenOfOwnerByIndex,
} from "../contracts/helper/erc721.js";
import "../contracts/const/contractAddress.js";
import { SEPOLIA_NET } from "../contracts/const/contractAddress.js";
const PetList = () => {
  const [petData, setPetData] = useState([]);
  const navigate = useNavigate();
  const address = SEPOLIA_NET.nftMark.toString();
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://127.0.0.1:3001/petlist");
        setPetData(response.data);
        console.log(response.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);
  // useEffect(() => {
  //   const fetchNFTs = async () => {
  //     const length = await balanceOf(address);
  //     console.log("balance:" + length);
  //     console.log("length", length);
  //     for (let i = 0; i < length; i++) {
  //       const tokenId = await tokenOfOwnerByIndex(address, i);
  //       console.log("i:", i);
  //       const metadata = await getMetadata(tokenId);

  //       console.log(metadata);
  //       setPetData((prev) => [...prev, metadata]);
  //       // setPets((prev) => [...new Set(prev)]);
  //     }
  //   };
  //   fetchNFTs();
  // }, []);
  const handleCardClick = (tokenId) => {
    navigate(`/nft-detail/${tokenId}`);
  };
  return (
    <div style={style}>
      <div className="container" style={{ width: "700px" }}>
        <div className="row">
          <div>
            <h1
              className="text-center"
              style={{
                textAlign: "center",
                fontSize: "40px",
                fontFamily: "Courier New, Courier, monospace",
                fontWeight: "bold",
                color: "#F5F5DC",
              }}
            >
              Better Buy Now
            </h1>
            <hr />
            <br />
          </div>
        </div>

        <div id="petsRow" style={{ display: "flex", flexWrap: "wrap" }}>
          {petData.map((pet) => (
            <PetCard
              key={pet.id}
              pet={pet}
              onClick={() => handleCardClick(pet.tokenId)}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

const PetCard = ({ pet, onClick }) => (
  <div className="petInfo" onClick={onClick}>
    <div className="panel-heading">
      <h3 className="panel-title">{pet.title}</h3>
    </div>
    <div className="panel-body">
      <div className="cropped-image">
        <img src={pet.images} className="pet-image" />
      </div>
      <br />
      <br />
      <br />
      <strong>Message</strong>:
      <span className="pet-description">
        {pet.description.slice(0, 3) + "..."}
      </span>
      <br />
      <br />
      <strong style={{ fontSize: "18px", fontWeight: "bold", color: "red" }}>
        Price
      </strong>
      :{pet.price}
      <br />
      <br />
    </div>
    {/* </div> */}
  </div>
);

export default PetList;
